<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import Consts from "@/consts.js";
import util from "util";
require("cesium/Widgets/widgets.css");

export default {
	name: Consts.ROUTING_NAME.CUSTOM_GEOMETRY,
  data() {
    return {
      Consts: Consts,
      viewer: undefined,
    	boxLength : 100000.0, 
			position : undefined,
			modelMatrix : undefined,
			// 0 立方体顶点位置标号，以及坐标系示意图
			// 立方体
			//    v6----- v5
			//   /|      /|
			//  v1------v0|
			//  | |     | |
			//  | |v7---|-|v4
			//  |/      |/
			//  v2------v3
			// 坐标系
			//  z
			//  | /y
			//  |/
			//  o------x

			// 1 定义位置数组
			v0 : [0.5, -0.5, 0.5],
			v1 : [-0.5, -0.5, 0.5],
			v2 : [-0.5, -0.5, -0.5],
			v3 : [0.5, -0.5, -0.5],
			v4 : [0.5, 0.5, -0.5],
			v5 : [0.5, 0.5, 0.5],
			v6 : [-0.5, 0.5, 0.5],
			v7 : [-0.5, 0.5, -0.5],
			rawVertex : undefined 
    };
  },
  created() {
		this.position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 0.5 * this.boxLength);
    this.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(this.position);
		this.rawVertex = [
      ...this.v2, ...this.v3, ...this.v4, ...this.v7, // 下 -z
      ...this.v2, ...this.v3, ...this.v0, ...this.v1, // 前 -y
      ...this.v4, ...this.v7, ...this.v6, ...this.v5, // 后 +y
      ...this.v7, ...this.v2, ...this.v1, ...this.v6, // 左 -x
      ...this.v3, ...this.v4, ...this.v5, ...this.v0, // 右 +x
      ...this.v1, ...this.v0, ...this.v5, ...this.v6 // 上 +z
			];
  },
  mounted() {
    this.viewer = this.initViewer(); 

    // 乘上box的长度
		var self = this;
    var boxVertex = this.rawVertex.map(function(v) {
      return v * self.boxLength;
    }); 
    var positions = new Float64Array(boxVertex); 

    // 2 定义法向数组
    var npx = [1, 0, 0];
    var nnx = [-1, 0, 0];
    var npy = [0, 1, 0];
    var nny = [0, -1, 0];
    var npz = [0, 0, 1];
    var nnz = [0, 0, -1];
    var normals = new Float32Array([
      ...nnz, ...nnz, ...nnz, ...nnz, // 下 -z
      ...nny, ...nny, ...nny, ...nny, // 前 -y
      ...npy, ...npy, ...npy, ...npy, // 后 +y
      ...nnx, ...nnx, ...nnx, ...nnx, // 左 -x
      ...npx, ...npx, ...npx, ...npx, // 右 +x
      ...npz, ...npz, ...npz, ...npz // 上 +z
    ]);

    // 3 定义纹理数组
    var sts = new Float32Array([
      0, 0, 1, 0, 1, 1, 0, 1,
      0, 0, 1, 0, 1, 1, 0, 1,
      0, 0, 1, 0, 1, 1, 0, 1,
      0, 0, 1, 0, 1, 1, 0, 1,
      0, 0, 1, 0, 1, 1, 0, 1,
      0, 0, 1, 0, 1, 1, 0, 1
    ]);

    // 4 定义索引
    var indices = new Uint16Array([
      0, 1, 2, 0, 2, 3,
      4, 5, 6, 4, 6, 7,
      8, 9, 10, 8, 10, 11,
      12, 13, 14, 12, 14, 15,
      16, 17, 18, 16, 18, 19,
      20, 21, 22, 20, 22, 23
    ]);

    // 5 创建Primitive
    this.viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
          geometry: new Cesium.Geometry({
            attributes: {
              position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute: 3,
                values: positions
              }),
              normal: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: normals
              }),
              st: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 2,
                values: sts
              })
            },
            indices: indices,
            primitiveType: Cesium.PrimitiveType.TRIANGLES,
            boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
          })
          // attributes : {
          //   color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 0.0, 1.0))
          // }
        }),
        // appearance: new Cesium.PerInstanceColorAppearance({
        //   flat : true,
        //   translucent : false
        // }),
        appearance: new Cesium.MaterialAppearance({
          material: Cesium.Material.fromType("Image", {
            image: require("../assets/CesiumBalloonPrint_singleDot.png")
          }),
					// 当绘制的三角面片法向不能朝向视点时，自动翻转法向，从而避免法向计算后发黑等问题
          //faceForward : true 
          closed: true // 是否为封闭体，实际上执行的是是否进行背面裁剪
        }),
        modelMatrix: this.modelMatrix,
        asynchronous: false
      })
    );

    this.viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(this.position, 100000));
  },
  methods: {
    initViewer() {
      var viewer = new Cesium.Viewer("cesiumContainer", {
        scene3DOnly: true
      });

      // 视角不转到地下
      viewer.scene.globe.depthTestAgainstTerrain = true;
      // 去除版权信息
      viewer._cesiumWidget._creditContainer.style.display = "none";

      return viewer;
    }
  }
};
</script>

<style lang="less" scoped></style>
